<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" :get-container="getContainer" @open="handleSearch">
    <van-nav-bar
      title="选择模具"
      left-text="取消"
      @click-left="$emit('close')"
      @click-right="handleAction"
    >
      <template #right>
        <van-icon name="plus" size="20" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-search v-model="page.query.moldName" show-action placeholder="请输入模具名称">
        <template #action>
          <div @click="handleSearch">搜索</div>
        </template>
      </van-search>
      <van-list
        v-model="tableLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="doPage"
      >
        <van-radio-group v-model="moldId">
          <van-cell v-for="(item,index) in tableData" :key="index" @click="handleChangeMold(item)">
            <template #title>
              <div class="title">
                {{ item.moldName }}
              </div>
            </template>
            <template #label>
              {{ item.categoryName }}
              一模{{ item.capacity }}{{ item.unit }}
            </template>
            <template #right-icon>
              <van-radio :name="item.id" />
            </template>
          </van-cell>
        </van-radio-group>
      </van-list>
    </van-pull-refresh>
    <div class="bottom_button">
      <van-button type="danger" block round @click="confirmSelect">确定</van-button>
    </div>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <mold-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
  </van-popup>
</template>

<script>
import { selectMoldPage } from '@/api/mold'
import MoldSubmitModule from '@/views/mold/moldSubmit.vue'
export default {
  name: 'SelectMold',
  components: { MoldSubmitModule },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.visible,
      showSubmit: false,
      tableLoading: false,
      finished: false,
      tableData: [],
      refreshing: false,
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {}
      },
      moldId: ''
    }
  },
  methods: {
    handleAction() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init()
      })
    },
    doPage() {
      this.tableLoading = true
      selectMoldPage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
        }
      }).catch(() => {
        this.finished = true
      }).finally(() => {
        this.tableLoading = false
        this.page.page++
      })
    },
    onRefresh() {
      this.page.page = 1
    },
    handleChangeMold(row) {
      this.moldId = row.id
    },
    confirmSelect() {
      const moldInfo = this.tableData.filter(e => this.moldId.indexOf(e.id) !== -1)[0]
      this.moldId = ''
      this.$emit('close', moldInfo)
    },
    handleSearch() {
      this.tableData = []
      this.page.page = 1
      this.finished = false
    },
    handleClose() {
      this.showSubmit = false
      this.handleSearch()
    },
    getContainer() {
      return document.body
    }
  }
}
</script>

<style scoped>

</style>
